@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="text-center">
      	<img src="{{ Auth::user()->avatar }}" width="120px" class="img-circle" id="user-avatar">
      </div>
      <div id="validation-errors"></div>
      <form method="post" action="{{ url('user/avatar') }}" enctype="multipart/form-data" id="upload">
      	{{csrf_field()}}
		  <div class="form-group">
		    <label id="upload-avatar">更换新头像</label>
		    <input type="file" name="avatar" id="avatar">
		   {{-- <button type="submit" class="btn btn-default pull-right">上传图片</button>  --}}
		  </div>
		</form>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
      <div class="modal-content">
          <form method="post" action="{{ url('user/crop') }}">  
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color: #ffffff">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">裁剪头像</h4>
            </div>
            <div class="modal-body">
                <div class="content">
                    <div class="crop-image-wrapper">
                        <img src="/images/default-avatar.png" class="ui centered image" id="cropbox" >
                        <input type="hidden" id="photo" name="photo" />
                        <input type="hidden" id="x" name="x" />
                        <input type="hidden" id="y" name="y" />
                        <input type="hidden" id="w" name="w" />
                        <input type="hidden" id="h" name="h" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">裁剪头像</button>
            </div>
          </form>
      </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    var options = {
        beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json'
    };
    $('#avatar').on('change', function(){
        $('#upload-avatar').html('正在上传...');
        $('#upload').ajaxForm(options).submit();
    });
});
    function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css('display','none');
        return true;
    }

    function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                	$('#upload-avatar').html('更新失败');
                    $("#validation-errors").append('<div class="text-danger"><strong>'+ value +'</strong><div>');
                }
            });
            $("#validation-errors").show();
        } else {
            var cropBox = $("#cropbox");
			cropBox.attr('src',response.avatar);
			$('#photo').val(response.avatar);
			$('#upload-avatar').html('更换新头像');
			$('#exampleModal').modal('show');
			cropBox.Jcrop({
			    aspectRatio: 1,
			    onSelect: updateCoords,
			    setSelect: [120,120,10,10]
			});
			$('.jcrop-holder img').attr('src',response.avatar);
        }
    }
    function updateCoords(c){
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	}
	function checkCoords(){
	    if (parseInt($('#w').val())) return true;
	    alert('请选择图片.');
	    return false;
	}
</script>
@endsection

@section('css')
<script type="text/javascript" src="{{asset('css/jcrop.min.css')}}"></script>
@endsection
@section('script')
<script type="text/javascript" src="{{asset('js/jcrop.min.js')}}"></script>
@endsection